<template>
  <view class="detail-container">
    <!-- 商品图片 -->
    <view class="product-image-wrapper">
      <image class="product-image bg-color-1" src="/static/product.png" mode="aspectFill"></image>
    </view>

    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-name">商品名称</text>
      <text class="product-desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</text>
      <view class="points-info">
        <text class="points-label">积分数量：</text>
        <text class="points-value">2000</text>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="bottom-actions">
      <button class="action-btn contact-btn" @click="handleContact">联系客服</button>
      <button class="action-btn exchange-btn" @click="handleExchange">申请兑换</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
onLoad((e)=>{
	const id = e.id
	console.log(id)
})
// 处理联系客服
const handleContact = () => {
  // 实现联系客服逻辑
  uni.showToast({
    title: '正在连接客服...',
    icon: 'none'
  })
}

// 处理申请兑换
const handleExchange = () => {
  // 实现申请兑换逻辑
  uni.showModal({
    title: '确认兑换',
    content: '是否确认使用2000积分兑换该商品？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '兑换申请已提交',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<style>
.detail-container {
  min-height: 100vh;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
}

/* 商品图片样式 */
.product-image-wrapper {
  width: 100%;
  height: 500rpx;
  background: #FFFFFF;
}

.product-image {
  width: 100%;
  height: 100%;
}

/* 商品信息样式 */
.product-info {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #FFFFFF;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}

.product-desc {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 30rpx;
  display: block;
}

.points-info {
  display: flex;
  align-items: center;
}

.points-label {
  font-size: 28rpx;
  color: #333333;
}

.points-value {
  font-size: 36rpx;
  color: #1890FF;
  font-weight: bold;
}

/* 底部按钮区域样式 */
.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx 30rpx;
  background: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  border-radius: 44rpx;
  margin: 0 10rpx;
}

.contact-btn {
  background: #FFFFFF;
  color: #333333;
  border: 2rpx solid #DDDDDD;
}

.exchange-btn {
  background: #1890FF;
  color: #FFFFFF;
}

/* 背景色 */
.bg-color-1 {
  background-color: #F5F5F5;
}

/* 为底部按钮腾出空间 */
.detail-container {
  padding-bottom: 128rpx;
}
</style> 